<template>
  <div class="jiagezhuizongtop">
    <div class="jiagezhuizongtopcon">

      <div class="jgzztop">
        <JgzzSearch 
          :wldllist="wldllist" 
          :wlellist2="wlellist2" 
          :wlellist3="wlellist3" 
          @search="srarchbtnjgzz" 
          @getjgzzleft="getjgzzleft" 
        />
      </div>

      <div class="jgzzdowmdiv3" style="height: 73%; position: relative">
        <div style="width: 100%; height: 100%">
          <Tablecomponents
            v-if="main_active == 0"
            :isLoading="isLoading"
            :tableData="tableData_0"
            :currentPage="currentPage"
            :headerlist="jgzzechartslist"
            :isactive="isactive"
            :time="criteria4"
            :main_active="main_active"
            :materialName="materialName"
            :areaCode="yparam.areaCode"
            :engineeringCategory="yparam.engineeringCategory"
          />
          <Tablecomponents
            v-else-if="main_active == 1"
            :isLoading="isLoading"
            :tableData="tableData_1"
            :currentPage="currentPage"
            :headerlist="jgzzechartslist"
            :isactive="isactive"
            :time="criteria4"
            :main_active="main_active"
            :materialName="materialName"
            :areaCode="yparam.areaCode"
            :engineeringCategory="yparam.engineeringCategory"
          />
          <Tablecomponents
            v-else-if="main_active == 2"
            :isLoading="isLoading"
            :tableData="tableData_2"
            :currentPage="currentPage"
            :headerlist="jgzzechartslist"
            :isactive="isactive"
            :time="criteria4"
            :main_active="main_active"
            :materialName="materialName"
            :areaCode="yparam.areaCode"
            :engineeringCategory="yparam.engineeringCategory"
          />
          <Tablecomponents
            v-else-if="main_active == 3"
            :isLoading="isLoading"
            :tableData="tableData_3"
            :currentPage="currentPage"
            :headerlist="jgzzechartslist"
            :isactive="isactive"
            :time="criteria4"
            :main_active="main_active"
            :materialName="materialName"
            :areaCode="yparam.areaCode"
            :engineeringCategory="yparam.engineeringCategory"
          />
        </div>
        <!-- <div class="tablekuang" v-if="tableData.length > 0"></div> -->
        <el-pagination
          background
          align="center"
          @current-change="goodspagechange"
          :current-page="currentPage"
          page-size="10"
          layout="total,prev,pager,next,jumper"
          :total="total"
          style="margin-top: 5px"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Dialog from "@/components/dialog.vue";
import SeleceTree from "@/components/selece-tree.vue";
import Tablecomponents from "@/components/tablecomponents_1.vue";
import { timestampToTime1 } from "@/utils/common";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
import Select from "@/components/select/index.js";
import dateRangeVue from './datePicker/src/panel/date-range.vue';
import JgzzSearch from "@/components/jgzzsearch.vue";
import top1 from "./jgzz_mock_top_1";

export default {
  props: {},
  components: {
    Dialog,
    SeleceTree,
    Tablecomponents,
    YYDatePick,
    dataPicker,
    Select,
    JgzzSearch,
  },
  data() {
    let id = 0;
    return {
      isLoading: false,

      pickerOptions0: {
        disabledDate: (time) => {
          if (this.criteria4[1]) {
            return time.getTime() > new Date(this.criteria4[1]).getTime();
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.criteria4[0]).getTime() ;
        },
      },
      tableH: "100%",
      optionProps: {
        value: "materialclasscode",
        label: "title",
        children: "children",
      },
      rotate: false,
      wldllist: [],
      wlellist: [],
      wlsllist: [],
      isactive: 2,
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentPage: 1, //当前页
      szjythirdpopvisiable: false,
      szjythirdpopvisiablebig: false,
      poptitle: "价格追踪",
      total: 0,
      criteria1: "",
      criteria2: "",
      criteria3: "",
      yubeicriteria3: "",
      criteria4: timestampToTime1(),
      icon: require("@/assets/shuzijiaoyipopupbottomdown.png"),
      tableData: [],
      tableData_0: [],
      tableData_1: [],
      tableData_2: [],
      tableData_3: [],
      jgzzechartslist: [
        "最新中标单价/元",
        "最低中标单价/元",
        "最高中标单价/元",
        "平均中标单价/元",
      ],
      prevdata: {},
      criteriatext3: "",
      clickshow: false,
      dangqianye: 1,
      timer: null,

      activeChild: 0,

      matCode: null,

      main_active: 0,
      materialName:'',
      yparam: {},

      wlellist2: [],
      wlellist3: [],
    };
  },
  watch: {
    criteria1: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "newVal, oldVal");
        // if(!newVal){

        // }
        // if(newVal,oldVal){

        // }
        this.dangqianye = 1;
        this.criteria2 = "";
        this.criteria3 = "";
        this.wlellist = [];
        this.wlsllist = [];
      },
      deep: true,
    },
    criteria2: {
      handler(newVal, oldVal) {
        this.dangqianye = 1;
        this.criteria3 = "";
        this.wlsllist = [];
      },
      deep: true,
    },
    criteria3(newVal, oldVal) {
      this.dangqianye = 1;
      if (!newVal || newVal == undefined) {
        this.criteria3 = "";
        this.criteriatext3 = "";
      }
    },
    criteriatext3() {
      this.dangqianye = 1;
    },
  },
  mounted() {
    // this.getmatClassify({ offerType: 1 }, 1);
    // this.getmatClassify({ offerType: 2 }, 2);
    // this.getmatClassify({ offerType: 3 }, 3);
    // setTimeout(() => {
    //   this.getjgzzleft(2);
    // }, 500);
  },
  methods: {
    childNav(e){
      this.activeChild = e;
    },
    handleOperation(e) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.rotate = e;
      }, 150);
    },
    mouseClick(e) {
      if (e) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", false, false);
        document.dispatchEvent(clickEvent);
      }
    },
    getChildValue(val) {
      this.criteria3 = val.value;
      this.criteriatext3 = val.title;
    },
    srarchbtnjgzz(prevdata, param) {
      console.log('isactive:', param);
      this.isLoading = true;
      if(param){
        this.yparam = param;
        this.dangqianye = 1;
      }else{
        param = this.yparam;
      }
      
      // 劳务 || 分包
      if(param){
        // if(param.main_active==1 || param.main_active==2){
        //   let data = top1[`res_${param.main_active}_${param.child_active}`].data;
        //   if (data.items.length > 0) {
        //       this.tableData = data.items;
        //     }
        //     this.total = data.total;
        //     return
        // }
        this.matCode = param?.matCode;
        this.criteria4 = param?.criteria4;
        let isactive = param?.child_active; 
        this.main_active = param?.main_active; 
        this.materialName=param?.materialName; 
        if(isactive !== undefined){
          this.isactive = isactive;
          // this.getjgzzleft(isactive)
        }
      }
      this.tableData_0 = [];
      this.tableData_1 = [];
      this.tableData_2 = [];
      this.tableData_3 = [];

      this.currentPage = this.dangqianye || prevdata.pageNum;

      let data = {};

      data = {
        mcType: 0,
        startDate: this.criteria4[0] && new Date(this.criteria4[0]).toJSON().split('T')[0],
        endDate: this.criteria4[1] && new Date(this.criteria4[1]).toJSON().split('T')[0],
        matCode: this.matCode,
        pageNum: this.currentPage,
        pageSize: 10,
        areaCode: param.areaCode,
        areaName: param.areaName,
        hotMatCodes: param.hotMatCodes,
        materialName:param.materialName
      };

      // 劳务
      if(param?.main_active==1){
        data.mcType = 4;
        data.projectCode = param.engineeringCategory
      }
      // 专业分包
      else if(param?.main_active==2){
        data.mcType = 1;
        data.projectCode = param.engineeringCategory
      }
      // 租赁
      else if(param?.main_active==3){
        data.mcType = 3;
      }
        let key = 'tableData_' + this.main_active
        if (this.isactive == 0) {
          let name = '';
          if(data.mcType==0){
            name = 'fixedPriceCollect';
          }else{
            name = 'fixedJgzzCollect';
          }
          let API = APIS.Jgzz[name];
          API(data).then((res) => {
            this.isLoading = false;
            if (res.data.items.length > 0) {
              this.tableData = res.data.items;
              this.$set(this, key, res.data.items)
            }
            this.total = res.data.total;
            this.prevdata = data;
          });
        } else if (this.isactive == 1) {
          let name = '';
          if(data.mcType==0){
            name = 'floatPriceCollect';
          }else{
            name = 'floatJgzzCollect';
          }
          let API = APIS.Jgzz[name];
          API(data).then((res) => {
            this.isLoading = false;
            if (res.data.items.length > 0) {
              this.tableData = res.data.items;
              this.$set(this, key, res.data.items)
            }
            this.total = res.data.total;
            this.prevdata = data;
          });
        } else {
          let name = '';
          if(data.mcType==0){
            name = 'ratePriceCollect';
          }else{
            name = 'rateJgzzCollect';
          }
          let API = APIS.Jgzz[name];
          API(data).then((res) => {
            this.isLoading = false;
            if (res.data.items.length > 0) {
              this.tableData = res.data.items;
              this.$set(this, key, res.data.items)
            }
            this.total = res.data.total;
            this.prevdata = data;
          });
        }

    },
    getTreeData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children 若为空数组，则将 children 设为undefined
          data[i].children = undefined;
        } else {
          // children 若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    getmatClassify(data1, num) {
      APIS.Baseapi.matClassify(data1)
        .then((res) => {
          if (num == 1) {
            this.wldllist = res.data;
          } else if (num == 2) {
            this.wlellist2 = res.data;
          } else if (num == 3) {
            this.wlellist3 = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmat(data1) {
      APIS.Baseapi.mat(data1)
        .then((res) => {
          this.wlsllist = res.data;
          // this.wlsllist = this.getTreeData(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    openwldl(val) {
      let obj = this.wldllist.filter((item) => item.materialclasscode == val);
      this.getmatClassify(
        {
          pid: obj[0].materialclassid,
          materialclasscode: obj[0].materialclasscode,
          offerType: this.isactive + 1,
        },
        2
      );
    },
    openwlel(val) {
      let obj = this.wlellist.filter((item) => item.materialclasscode == val);
      this.getmat(
        {
          pid: obj[0].materialclassid,
          materialclasscode: obj[0].materialclasscode,
        },
        3
      );
    },
    getjgzzleft(index) {
      this.activeChild = 0;
      // 0 固定价 1 浮动价 2 费率报价
      this.dangqianye = 1;
      this.getmatClassify({ offerType: index + 1 }, 1);
      this.isactive = index;

      this.criteria2 = "";
      this.criteria3 = "";

      if (index == 0) {
        this.jgzzechartslist = [
          "最新中标单价/元",
          "最低中标单价/元",
          "最高中标单价/元",
          "平均中标单价/元",
        ];
      } else if (index == 1) {
        this.jgzzechartslist = [
          "最新浮动价(元)",
          "最低浮动价(元)",
          "最高浮动价(元)",
          "浮动均价(元)",
        ];
      } else if (index == 2) {
        this.jgzzechartslist = [
          "最新报价/(%)",
          "最低报价/(%)",
          "最高报价/(%)",
          "平均浮动比例/(%)",
        ];
      }
      // this.srarchbtnjgzz();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    goodspagechange(e) {
      this.dangqianye = e;
      this.prevdata.pageNum = e;
      this.srarchbtnjgzz(this.prevdata);
    },
    clickchange(e) {
      if (this.clickshow) {
        //展示
        document.documentElement.style.setProperty("--contenttypejgzz", "0deg");
      } else {
        //隐藏
        document.documentElement.style.setProperty(
          "--contenttypejgzz",
          "180deg"
        );
      }
      this.clickshow = !this.clickshow;
    },
  },
};
</script> 
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
::v-deep .custom3 {
  // height: 1.2rem;
  width: calc(100% - 2rem);

  .time {
    .transform180 {
      transform: rotate(180deg);
      transition: all 0.5s;
    }
    .transform0 {
      transform: rotate(0deg);
      transition: all 0.5s;
    }
    .icon {
      display: flex;
      align-items: center;
    }
    .icon::before {
      content: "▼";
      font-size: 12px;
      color: #0054f9;
    }
    display: flex;
    align-content: center;

    .el-input__prefix {
      display: none;
    }
    .el-input__inner {
      padding: 0 1rem;
      font-family: JCYT;
      border: none;
      background-color: transparent;
      position: relative;
      font-size: 0.8rem;
    }
    .el-range-editor .el-range-input {
      background-color: transparent;
    }
    .el-date-editor .el-range__close-icon {
      margin-right: 0.5rem;
    }
  }
}
.jiagezhuizongtop{
  height: 100%;
  margin-top: 1.2rem;
  .jiagezhuizongtoptitle{
    font-size: 28px;
    margin-bottom: 1.5rem;
    margin-left: 1.5rem;
    padding-bottom: 0.7rem;
    letter-spacing: 0.3em;
    display: inline-block;
    border-bottom: 1px solid #182c56;
  }
}
.jiagezhuizongtopcon {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 90%;
  position: relative;
  scroll-behavior: smooth;
  // overflow: hidden;
  font-size: 1rem;
  // padding-top: 1%;
  // border: 0.05rem solid #182c56;
  // border-radius: 0.3rem 1.5rem 0.3rem 0.3rem;
  .jgzztop{
    padding: 1rem;
    padding-top: 0;
  }
  .info {
    width: 20%;
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.8rem;
    box-sizing: border-box;
    .lable {
      margin-right: 0.3rem;
    }
  }
  .info2 {
    display: flex;
    align-items: center;
    padding: 0.5rem 2rem 0.8rem 0;
    box-sizing: border-box;
    .lable {
      margin-right: 0.3rem;
    }
  }
  .jgzzleft{
    position: relative;
    justify-content: start;
    &-con{
      height: 100%;
      margin-right: 1%;
      min-height: 40px;
      &-main{
        display: flex;
        position: relative;
        transform: translateY(-50%);
        .p{
          display: inline-flex;
          .txt{
            padding: 0.25rem 1.2rem;
            border: 0.05rem solid #182b53;
            margin-left: 10px;
            background: #fff;
            border-radius: 3rem;
            cursor: pointer;
          }
          &.jgzzleftactive{
            .txt{
              color: #fff;
              background: #182b53;
            }
          }
        }
        &-nav{
          position: absolute;
          top: 2.2rem;
          left: 0.5rem;
          display: flex;
          width: 14.5rem;
          background: #182b53;
          border-radius: 3rem;
          padding: 0.3rem 0;
          &.nav_1{
            &::before{
              content: '';
              height: 15px;
              width: 1px;
              background: #182b53;
              position: absolute;
              left: 15.5%;
              top: -12px;
            }
          }
          &.nav_2{
            &::before{
              content: '';
              height: 15px;
              width: 1px;
              background: #182b53;
              position: absolute;
              left: 50%;
              top: -12px;
            }
          }
          &.nav_3{
            &::before{
              content: '';
              height: 15px;
              width: 1px;
              background: #182b53;
              position: absolute;
              left: 85%;
              top: -12px;
            }
          }
          .nav-list{
            width: 33.33%;
            text-align: center;
            color: #fff;
            font-size: 0.7rem;
            cursor: pointer;
            &.on{
              display: flex;
              justify-content: center;
              align-items: center;
              &::before{
                content: '';
                width: 7px;
                height: 7px;
                background: #ef811f;
                border-radius: 10px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .search{
    margin-left: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-right: 10px;
    img{
      width: 3rem;
      height: 3rem;
    }
    // background-color: url('./../assets/iconsearch.png');
    // background-size: 12rem 12rem;
  }
}
::v-deep .public {
  .el-input__prefix {
    border: none;
  }
  .el-input__inner {
    .el-input__icon {
      display: none;
    }
    border: none;
    border-radius: 0;
    background-color: rgba(237, 241, 249, 1);
    color: #192c55;
  }
  .el-select__caret {
    color: #192c55 !important;
  }
}

::v-deep .el-button {
  background-color: #0000ff;
  color: white;
}

// 水平位移动画
.transition-t {
  transform: translate(0, -100%);
  transition: all 1s;
}
.transition-b {
  transform: translate(0, 0);
  transition: all 1s;
}
.tablekuang {
  height: 90%;
  width: 52%;
  border: 1px solid #949eb4;
  // background-color:rgba(225, 234, 249,.9);
  border-top: none;
  position: absolute;
  right: 0.7%;
  top: 10%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 4;
}
.box {
  width: 400px;

  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 60px;
  }

  .right {
    float: right;
    width: 60px;
  }

  .bottom {
    clear: both;
    text-align: center;
  }

  .item {
    margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
    padding: 8px 10px;
  }
}
::v-deep .myselectjgzz {
  width: 100%;
  position: relative;

  .el-icon-arrow-up:before {
    content: "▲";
    color: #0054f9;
  }
  .el-input__inner {
    font-family: JCYT;
    border: none;
    background-color: transparent;
    border-radius: 0;
  }
  .el-input {
    font-size: 0.8rem;
  }
  /* .el-input__suffix {
    width: 20px;
    height: 20px;
    color: #192c55;
    right: 1.3rem;
    top: calc(100% - 10px);
  } */
}
</style>
<style >
</style>
./jgzz_mock_top_1